<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
          <el-form-item label="Cluster">
            <el-select v-model="formInline.cluster" clearable placeholder="请选择Cluster" @change="getUserList">
              <el-option
                v-for="(item,i) in clusterList"
                :key="i"
                :label="item.clusterName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser('ztgl')"><Icon type="md-add" />创建主题</el-button>
        <el-button @click="getDataFun(true)"><Icon type="el-icon-more" />获取数据</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <ykhttb
      ref="httbRef"
      :btn-is-show="btnIsShow"
      :table-col="tabUserList"
      :table-data="tableUserData"
      width="350"
      @getDataDetileInfo="getDataDetileInfo"
      @sendData="sendData"
      @deleteSelectData="deleteSelectData"
      @refresh="getUserList"
      @getDjInfo="getDjInfo"
    />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10,20,50,100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增 -->
    <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm autoClass">
        <el-form-item label="主题名称" prop="topicName">
          <el-input v-model="ruleForm['topicName']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="Broker" prop="clusterId">
          <el-select v-model="ruleForm.clusterId" :disabled="disFlag" clearable placeholder="请选择Broker">
            <el-option
              v-for="(item,i) in clusterList"
              :key="i"
              :label="item.clusterName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="false" label="分区数" prop="partition">
          <el-input v-model="ruleForm['partition']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item v-if="false" label="副本因子" prop="replication">
          <el-input v-model="ruleForm['replication']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="描述" prop="comments">
          <el-input v-model="ruleForm['comments']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
      </el-form>
      <div v-if="!disFlag" style="text-align: center;">
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('return')">返回</el-button>
      </div>
    </el-dialog>
    <!-- 发送 -->
    <el-dialog :close-on-click-modal="false" title="" width="50%" :visible.sync="dialogTableVisible2">
      <addthemeadm :addthemeadmInfo="addthemeadmInfo" :clusterId="formInline.cluster" ref="addthemeadm" :kafkaCluster="kafkaCluster" v-if="sendFlag&&dialogTableVisible2" />
      <sendadm :clusterId="formInline.cluster" v-if="!sendFlag&&dialogTableVisible2" :data-info="dataInfo" />
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="堆积详情" width="50%" class="djDetile" :visible.sync="dialogTableVisible1">
        <div style="margin-bottom: 20px;" v-if="dialogTableVisible1">
          <el-descriptions class="margin-top" title="" :column="3" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                主题
              </template>
              {{ djDeInfo.topic }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                分区
              </template>
              {{ djDeInfo.partition }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                消费组
              </template>
              {{ djDeInfo.consumerGroup }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <ykhttb
        v-if="dialogTableVisible1"
            ref="httbRef"
            width="250" 
            :btn-is-show="{operate:false}"
            :table-col="[
               {
                  key: 'offset',
                  title: '偏移'
                },
                {
                  key: 'timestamp',
                  title: '时间'
                },
                {
                  key: 'value',
                  title: '内容'
                }
            ]"
            :table-data="recordsList"
          >
        </ykhttb>
        <!-- <div class="vueJsonEditor">
          <div v-if="dialogTableVisible1">
            <json-view :data="codeInfo"/>
          </div>
        </div> -->
      </el-dialog>
  </div>
</template>

<script>
// 查看列表、详情，删除（报错）
import { topiclist, topicqueryTopicData, topiccreateTopic, dataModeltypeupdateById, MQMonitorkafka,
  clusterlist, topicdeleteTopic,MQMonitorkafkagetLagRecordKafka } from '@/api/zt/index'
import experiment from '@/mixins/experiment'
import addthemeadm from './addThemeadm.vue'
import sendadm from './sendadm.vue'
import jsonView from 'vue-json-views'
export default {
  components: {
    addthemeadm, sendadm,jsonView
  },
  mixins: [experiment],
  data() {
    return {
      recordsList:[],
      allList:[],
      dialogTableVisible1:false,
      codeInfo:{},
      clusterList: [],
      sendFlag: false,
      dialogTableVisible2: false,
      sendShow: false,
      kafkaCluster:"",
      width: '25%',
      btnIsShow: {
        operate: true,
        getData:true,
        monitor:true,
        update: false,
        detile: false,
        del: false
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      title: '新增',
      dialogTableVisible: false,
      rules: {
        topicName: [
            { required: true, message: '请输入主题名称', trigger: 'change' }
        ],
        clusterId: [
            { required: true, message: '请输入Broker', trigger: 'change' }
        ]
      },
      ruleForm: {
        'comments': '',
        'replication': '',
        'partition': '',
        'topicName': '',
        'clusterId': '',
        'ttl': ''
      },
      userId: '',
      formInline: {
        'cluster': ''
      },
      addParms: [],
      addParms2: [],
      tableUserData: [],
      addthemeadmInfo:null,
      dataInfo: null,
      tabUserList: [
          {
            key: 'topic',
            title: '主题'
          },
          {
            key: 'partition',
            title: '分区'
          },
          {
            key: 'consumerGroup',
            title: '消费组'
          },
          {
            key: 'brokerAddr',
            title: 'Broker'
          },
          {
            key: 'lag',
            title: '堆积数量'
          }
        ],
      total: 0,
      size: 10,
      page: 1,
      djDeInfo:{},
      dataAllList: []
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      clusterlist({
        or_orderby_createTime: 'dsc'
      }).then(res => {
        this.clusterList = res.data
      })
    })
  },
  methods: {
    getDjInfo(v){
        this.djDeInfo = JSON.parse(v)
        MQMonitorkafkagetLagRecordKafka(JSON.parse(v).consumerGroup,JSON.parse(v).partition,JSON.parse(v).topic).then(res=>{
          this.dialogTableVisible1 = true
          if(res.code==200){
            this.codeInfo = res
            this.recordsList = res.data.records
          }else{
            this.recordsList = []
          } 
        })
      },
    showGetData(v){
      this.getDataFun(true,v)
    },
    getDatatopicqueryTopicData(){
      topicqueryTopicData(
        {
          groupID:'',
          isByPartition:'',
          isCommit:'',
          recordNum:'',
          topicName:'',
          waitTime:''
        }).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    deleteSelectData(v) {
      topicdeleteTopic({clusterId:v.clusterId,topicName:v.topicName}).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    getDataFun(v, data) {
      if(!this.formInline.cluster){
        this.$message.error('请先选择Cluster')
        return 
      }
      this.sendFlag = v
      this.dialogTableVisible2 = true
      if(v){
        this.addthemeadmInfo = data
      }else{
        let clusterName = ''
        this.clusterList.forEach((item,index)=>{
          if(this.formInline.cluster==item.id){
            clusterName = item.clusterName
          }
        })
        this.dataInfo = {
          cluster:this.formInline.cluster,
          clusterName:clusterName,
          topicName:data.topic
        }
      }
      
    },
    sendData(v) {
      this.getDataFun(false, v)
    },
    deleteParams2(i) {
      const a = JSON.parse(JSON.stringify(this.addParms2))
      a.splice(i, 1)
      this.addParms2 = JSON.parse(JSON.stringify(a))
    },
    addParamsFun() {
      this.addParms.push({ key1: '', key2: '', key3: '' })
    },
    addParamsFun2() {
      this.addParms2.push({ key1: '', key2: '' })
    },
    handleNodeClick(data) {
      console.log(data)
    },






    commitFromData() {
      this.ruleForm.ttl = 1
      this.ruleForm.partition = 1
      this.ruleForm.replication = 1
      let op = {
        'comments': this.ruleForm.comments,
        'replication':1,
        'partition': 1,
        'topicName': this.ruleForm.topicName,
        'clusterId': this.ruleForm.clusterId,
        'ttl': 1
      }

      if (this.ruleForm.hasOwnProperty('id')) {
        dataModeltypeupdateById(op).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      } else {
        topiccreateTopic(op).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      }
    },
    // handleSizeChange(v) {
    //   this.tableUserData = this.dataAllList.slice(0, v)
    // },
    // handleCurrentChange(v) {
    //   this.tableUserData = this.dataAllList.slice(v * 10 - 10, v * 10)
    // },



    handleSizeChange(v) {
        this.size = v
        let newsStr = JSON.parse(JSON.stringify(this.allList))
        let a =newsStr.splice(0,this.size)
        this.tableUserData = JSON.parse(JSON.stringify(a))
      },
      handleCurrentChange(v) {
        this.updataTableData = false
        let newsStr = JSON.parse(JSON.stringify(this.allList))
        let a =newsStr.splice(this.size*v-10,this.size)
        this.tableUserData = JSON.parse(JSON.stringify(a))
        this.updataTableData = true
      },
    // 获取用户列表
    getUserList() {
      this.clusterList.forEach((item,index)=>{
        if(item.id==this.formInline.cluster){
          this.kafkaCluster = item.clusterName
        }
      })
      this.dialogTableVisible = false
      this.$refs.httbRef.isShowLoading(true)
      this.dialogTableVisible1 = false
      MQMonitorkafka({clusterID:this.formInline.cluster}).then(res => {
        this.allList  = JSON.parse(JSON.stringify(res.data.records))
        this.tableUserData = res.data.records.splice(0,10)
        this.total = this.allList.length
        this.$refs.httbRef.isShowLoading(false)
      })
    }
  }
}
</script>

      <style lang="scss" scoped>
>>>.djDetile .el-dialog__body {
    padding: 20px 20px 30px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}
      >>>.jsoneditor-poweredBy {
        display: none !important;
      }

      .addPs{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        >div{
          width:50%
        }
        span{
          display: inline-block;
          width: 10%;
        }
      }
      .autoClass{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .el-form-item{
          width:50%;
        }
      }
      .addcs{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
      }
      .addcs2 .el-select {
        display: inline-block;
        width: 240px;
      }
      .autoInput{
        display: inline-block;
        width: 70%;
      }
      .infoTitle{
        border-bottom:1px solid #e5e5e5;
        margin-bottom: 30px;
        position: relative;
      }
      .infoTitle>span{
        position: absolute;
        left: 20px;
        background: #fff;
        width:80px;
        top:-15px;
        height:30px;
        text-align: center;
        line-height: 30px;
      }
        .el-select{
           width:100%;
        }
        .timing{
          background:#fff;
          padding:20px;
        }
      </style>
